<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>3-3 剩余空间调整为间距 </title>
	</head>


	<!--
	 
	 flex-direction 
	 
	 作用  子元素在父元素中的排列方式 
	 默认值  row 
	 flex-direction: row;
	 flex-direction: row-reverse;
	 flex-direction: column;
	 flex-direction: column-reverse;
	 
	 
	 flex-wrap  
	 作用： 子元素 在父元素盒子中 是否换行(换列)
	 
	 nowrap
	 wrap
	 wrap-reverse
	
	
	
	简写方式 ： 两个值方向 flex-direction, flex-wrap
	flex-flow: row wrap;
	
	flex-flow: row no-wrap;
	
	
	justify-content  用来 在存在的剩余空间时候，设置为间距的方式
	
	
	/* justify-content: flex-start; */
	/* justify-content: flex-end; */
	/* justify-content: center; */
	justify-content: space-between;
	/* justify-content: space-around; */
	
	
	
	3.4  交叉轴对齐方式
	
	align-items: center;
				 flex-start;
				 flex-end;
				 space-between;
				 space-around;
				 
	align-content: 把多行当成一个整体来对待的。
				 center;
				 flex-start;
				 flex-end;
				 space-between
				 space-around;
align-content: space-between;
	 -->

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: content-box;
		}

		.container {
			width: 400px;
			/* 要设定高度 */
			height: 400px;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;


			background-color: pink;
			border: 0.05px solid black;

			
			align-items: center;
			
	
			
			/* align-content:center; */
			/* align-items: center; */
			/* align-items: flex-start; */
			/* align-items: flex-end; */

		}

		.container div {
			width: 100px;
			height: 100px;
			background-color: rgba(0, 0, 0, .1);
			/* margin: 1px; */
		}

	</style>


	<body>

		<div class="container">

			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<!-- <div>5</div>

			<div>5</div>
			<div>5</div>
			<div>5</div>
			<div>5</div> -->
			<!-- <div>5</div> -->

		</div>


	</body>
</html>
